// 初始页面
import { Card, Timeline } from "antd";
import styles from "./index.module.scss";

// 编写时间轴节点
const items = [
  {
    color: "green",
    children: (
      <>
        <p>2024-04-10 10:00:00 开始执行任务</p>
        <p>2024-04-10 10:00:00 任务执行完成</p>
      </>
    ),
  },
  {
    color: "red",
    children: (
      <>
        <p>2024-04-10 10:00:00 开始执行任务</p>
        <p>2024-04-10 10:00:00 任务执行完成</p>
      </>
    ),
  },
  {
    color: "green",
    children: (
      <>
        <p>2024-04-10 10:00:00 开始执行任务</p>
        <p>2024-04-10 10:00:00 任务执行完成</p>
      </>
    ),
  },
  {
    color: "gray",
    children: (
      <>
        <p>Technical testing 1</p>
        <p>Technical testing 2</p>
        <p>Technical testing 3 2015-09-01</p>
      </>
    ),
  },
  {
    color: "#00CCFF",
    children: <p>Custom color testing</p>,
  },
];
export default function TimeLine() {
  return (
    <Card>
      {/* 分成两列 */}
      <div className="flex justify-around">
        <div className="w-1/2">
          <Timeline items={items} />
        </div>
        <div className="w-1/2">
          {/* 自动滚动的列表 */}
          <div
            className={`${styles["auto-scroll-list"]} border border-gray-200 rounded-lg p-4`}
          >
            <div className={`${styles["scroll-content"]}`}>
              {[...Array(2)].map(
                (
                  _,
                  loop // 复制两份内容实现无缝滚动
                ) => (
                  <div key={loop}>
                    {[...Array(100)].map((_, i) => (
                      <div key={i}>
                        List Item {i}
                      </div>
                    ))}
                  </div>
                )
              )}
            </div>
          </div>
        </div>
      </div>
    </Card>
  );
}
